import 'package:flutter/material.dart';

/// SingleChildScrollView 实现抽屉显示与隐藏
class ScrollViewDrawerFrame extends StatefulWidget {
  final double drawerWidth;
  final Widget? drawerWidget;

  const ScrollViewDrawerFrame(
      {Key? key, this.drawerWidth = 250, this.drawerWidget})
      : super(key: key);

  @override
  _ScrollViewDrawerFrameState createState() => _ScrollViewDrawerFrameState();
}

class _ScrollViewDrawerFrameState extends State<ScrollViewDrawerFrame> {
  late ScrollController? _scrollController;
  bool _showDrawer = false;

  @override
  void initState() {
    _scrollController =
        ScrollController(initialScrollOffset: widget.drawerWidth);
    _scrollController!.addListener(() {
      if (_scrollController!.offset <= 0) {
        if (!_showDrawer) {
          setState(() {
            _showDrawer = true;
          });
        }
      } else {
        if (_showDrawer) {
          setState(() {
            _showDrawer = false;
          });
        }
      }
    });
    WidgetsBinding.instance?.addPostFrameCallback((_) => getInitState());
    super.initState();
  }

  Future<bool> getInitState() async {
    _scrollController?.jumpTo(
      widget.drawerWidth,
    );
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        controller: _scrollController,
        // PageScrollPhysics 用于确保会滚到页的边缘，ClampingScrollPhysics 防止滚动超出边界
        physics: const PageScrollPhysics(parent: ClampingScrollPhysics()),
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width + widget.drawerWidth,
          child: Row(
            children: [
              SizedBox(
                height: MediaQuery.of(context).size.height,
                width: widget.drawerWidth,
                child: widget.drawerWidget ??
                    Container(
                      color: Colors.grey,
                    ),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: Container(
                  decoration: BoxDecoration(color: Colors.white, boxShadow: [
                    BoxShadow(
                        color: Colors.grey.withOpacity(0.6), blurRadius: 24)
                  ]),
                  child: Stack(
                    children: [
                      IgnorePointer(
                        ignoring: _showDrawer,
                        child: const Center(
                          child: Text(
                            "hello",
                            textScaleFactor: 2.0,
                          ),
                        ),
                      ),
                      if (_showDrawer)
                        InkWell(
                          onTap: () {
                            onDrawerClick();
                          },
                        )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  void onDrawerClick() {
    if (_scrollController!.offset != 0.0) {
      // show drawer
      _scrollController?.animateTo(
        0.0,
        duration: const Duration(milliseconds: 400),
        curve: Curves.fastOutSlowIn,
      );
    } else {
      // hide drawer
      _scrollController?.animateTo(
        widget.drawerWidth,
        duration: const Duration(milliseconds: 400),
        curve: Curves.fastOutSlowIn,
      );
    }
  }
}
